﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using Form Selectors and Filters</title>
<script type="text/javascript" src="../jquery-1.9.1.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        //$("form :input").css("border", "3px solid red");
        //$("form :text").css("border", "3px solid red");
        //$("form :text:enabled").css("border", "3px solid red");
        //$("form :checked").css("border", "3px solid red");
        //$("form :checkbox:checked").css("border", "3px solid red");
    });
</script>
    <style type="text/css">
        .style1
        {
            width: 600px;
        }
        .style2
        {
            width: 200px;
        }
    </style>
</head>
<body>

    <h1>
        Example Form Document</h1>
<form action="" method="post">

<table class="style1">
<tbody>
    <tr>
        <td class="style2">
            First Name</td>
        <td>
            <input id="FirstName" type="text" /></td>
    </tr>
    <tr>
        <td class="style2">
            Last Name</td>
        <td>
            <input id="LastName" type="text" /></td>
    </tr>
    <tr>
        <td class="style2">
            Disabled Element</td>
        <td>
            <input id="Text1" type="text" disabled="disabled"/></td>
    </tr>
    <tr>
        <td class="style2">
            Gender</td>
        <td>
            <input id="Male" type="radio" checked="checked"/>M<input id="Female" type="radio" />F</td>
    </tr>
    <tr>
        <td class="style2">
            What products are you interested in?</td>
        <td>
            <input id="Checkbox1" type="checkbox" checked="checked"/><label for="Checkbox1">Widgets</label><br />
            <input id="Checkbox2" type="checkbox" /><label for="Checkbox1">Hibbity Jibbities</label><br />
            <input id="Checkbox3" type="checkbox" checked="checked"/><label for="Checkbox1">SplashBangers</label><br />
            <input id="Checkbox4" type="checkbox" /><label for="Checkbox1">Whatzits</label></td>
    </tr>
    <tr>
        <td class="style2">
            Comments:</td>
        <td>
            <textarea id="Comments" cols="40" name="S1" rows="5"></textarea></td>
    </tr>
    <tr>
        <td class="style2">
            Optional life story file</td>
        <td>
            <input id="File1" type="file" /></td>
    </tr>
    <tr>
        <td class="style2">
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td class="style2">
            &nbsp;</td>
        <td>
            <input id="Submit1" type="submit" value="submit" /> <input id="Reset1" 
                type="reset" value="reset" /></td>
    </tr>
</tbody></table>

</form>
</body>
</html>
